<template>
	<scroll-view scroll-y class="scroll-lists">
		<view class="agent-form-wrap">

			<view class="agent-form">
				
				<view class="form-card">
					<view class="card-title">选择所属校园服务商</view>
				
					<view class="form">
						<view class="form-item">
							<view class="form-label">学校代理商<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input ">
									<input type="text" v-model="agentInfo.linkman" disabled placeholder="请输入学校代理商" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">学校名称<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="text" v-model="formData.school_name" placeholder="请输入学校名称" placeholder-class="placeholder-class" />
								</view>
								<view class="hint">学校名称必须和学生证一致</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="form-card">
					<view class="card-title">您的个人信息</view>

					<view class="form">
						<view class="form-item">
							<view class="form-label">姓名<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="text" v-model="formData.linkman" placeholder="请输入您的真实姓名" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">手机号<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="number" v-model="formData.phone" :maxlength="11" placeholder="请输入您的真实手机号" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">身份证号<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="idcard" v-model="formData.id_card_no" placeholder="请输入您的真实身份证号" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="form-card">
					<view class="card-title">身份证正反面图片<text style="color: red;">*</text></view>

					<view class="form" style="padding-top: 0;">
						<view class="form-item">
							<!-- <view class="form-label">选择区域</view> -->
							<view class="form-body" style="border: none;padding-bottom: 0;">
								<upload-img ref="uploadImg" :value="formData.identity_card_data" multiple :max="2" module="real_verify" @success="handleUpload($event, 'identity_card_data')" @remove="handleRemove($event, 'identity_card_data')"></upload-img>
							</view>
						</view>
					</view>
				</view>
				<view class="form-card">
					<view class="card-title">学生证正反面图片<text style="color: red;">*</text></view>

					<view class="form" style="padding-top: 0;">
						<view class="form-item">
							<!-- <view class="form-label">选择区域</view> -->
							<view class="form-body" style="border: none;padding-bottom: 0;">
								<upload-img ref="uploadImg" :value="formData.student_card_data" multiple :max="2" module="real_verify" @success="handleUpload($event, 'student_card_data')" @remove="handleRemove($event, 'student_card_data')"></upload-img>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="footer-btns">
				<button class="cancel-btn flex-1" @click="save">保存</button>
				<button class="confirm-btn flex-1" @click="next">提交</button>
			</view>
		</view>
		
	</scroll-view>
</template>

<script>
	import AddressParse from 'address-parse';
	const checker = require("@/utils/checker.js");
	import provinceData from '@/libs/city-data/province.js';
	import cityData from '@/libs/city-data/city.js';
	import areaData from '@/libs/city-data/area.js';
	
	export default {
		name: 'auth-form',
		props: {
			agentId: [String, Number],
		},
		data() {
			return {
				isChecked: false,
				formData: {
					status: 0, // 0草稿；1正式
					agent_gid: '', // integer  可选 状态：0草稿；1正式 示例值: 1
					linkman: '', // string  姓名 可选
					phone: '', // string  联系电话 可选
					id_card_no: '', // string  身份证号 可选
					school_name: '', // string  名称 可选
					
					identity_card_data: [], // string  可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					student_card_data: [], // string  可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
				},
				rule: [
					{ name: "school_name",checkType: "notnull",checkRule: "",errorMsg: "请输入学校名称" },
					{ name: "linkman",checkType: "notnull",checkRule: "",errorMsg: "请输入真实姓名" },
					{ name: "phone",checkType: "notnull",checkRule: "",errorMsg: "请输入真实手机号" },
					{ name: "id_card_no",checkType: "notnull",checkRule: "",errorMsg: "请输入身份证号" },
					
					{ name: "identity_card_data",checkType: "notnull",checkRule: "",errorMsg: "请上传身份证图片" },
					{ name: "student_card_data",checkType: "notnull",checkRule: "",errorMsg: "请上传学生证图片" },
				],
				agentInfo: {}
			};
		},
		mounted() {
			this.formData.agent_gid = this.agentId
			this.getAgentInfo()
			this.getUserIdentityDetails()
		},
		methods: {
			getUserIdentityDetails() {
				this.$api.userIdentityDetailsApi(this.agentId).then(res=> {
					console.log('getUserIdentityDetails', res)
					this.formData = {
						agent_gid: res.data.agent_gid, // integer  可选 状态：0草稿；1正式 示例值: 1
						linkman: res.data.linkman, // string  姓名 可选
						phone: res.data.phone, // string  联系电话 可选
						id_card_no: res.data.id_card_no, // string  身份证号 可选
						school_name: res.data.school_name, // string  名称 可选
						identity_card_data: res.data.identity_card_data ? res.data.identity_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						student_card_data: res.data.student_card_data ? res.data.student_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					}
				}).catch(err=> {
					console.log('err', err)
				})
			},
			getAgentInfo() {
				this.$api.userAgentDetailsApi(this.agentId).then(res=> {
					this.agentInfo = res.data
				}).catch(err=> {
					console.log('err', err)
				})
			},
			// 上传身份证图片
			handleUpload(files, key) {
				this.formData[key] = files.map(item=> ({url: item.url}))
			},
			// 删除身份证图片
			handleRemove({files}, key) {
				this.formData[key] = files.map(item=> ({url: item.url}))
			},
			save() {
				this.formData.status = 0
				this.onSubmit()
			},
			next() {
				this.formData.status = 1
				this.onSubmit()
			},
			onSubmit() {
				const formData = {...this.formData}
				formData.identity_card_data = formData.identity_card_data.map(item=> item.url).join(',')
				formData.student_card_data = formData.student_card_data.map(item=> item.url).join(',')
				const checkRes = checker.check(formData, this.rule);
				if (checkRes) {
					this.handleSubmit(formData)
				} else {
					uni.showToast({
						title: checker.error,
						icon: "none"
					});
				}
			},
			handleSubmit(formData) {
				this.$api.userIdentitySetApi(formData).then(res=> {
					if (formData.status === 0) {
						uni.showToast({
							title: '保存成功'
						})
					} else {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(()=> {
							this.$emit('success')
						}, 1200)
					}
					
				}).catch(err=> {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-lists {
		flex: 1;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	
	.agent-form-wrap {
		padding: 0 32rpx;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.form-card {
		padding: 32rpx;
		margin-bottom: 32rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;

		.card-title {
			font-size: 34rpx;
			font-weight: 600;
			text-align: left;
			line-height: 46rpx;
			padding-bottom: 32rpx;
			color: rgba(0, 0, 0, 1);
		}

		.sub-title {
			font-size: 26rpx;
			font-weight: 600;
			text-align: left;
			line-height: 48rpx;
			padding-left: 16rpx;
			color: rgba(0, 0, 0, 0.4);
		}

		.form {
			padding-top: 32rpx;

			.form-item {
				padding-bottom: 32rpx;

				&:last-child {
					padding-bottom: 0;
				}
			}

			.form-label {
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				line-height: 44rpx;
				padding-bottom: 8rpx;
				color: rgba(0, 0, 0, 0.9);
			}

			.form-body {
				padding-bottom: 12rpx;
				border-bottom: 1px solid #E7E7E7;
			}

			.input {
				width: 100%;
				height: 72rpx;
				display: flex;
				align-items: center;

				input {
					flex: 1;
					height: 100%;
				}
			}

			.hint {
				font-size: 24rpx;
				font-weight: 400;
				text-align: left;
				line-height: 40rpx;
				padding-bottom: 10rpx;
				color: rgba(0, 0, 0, 0.4);
			}

			.right-btn {
				position: relative;
				padding: 0 32rpx;
				height: 48rpx;
				color: var(--primary-color);
				font-size: 32rpx;
				font-weight: 400;
				line-height: 48rpx;
				text-align: center;
				line-height: 48rpx;

				&:before {
					position: absolute;
					content: '';
					top: 5%;
					left: 0;
					bottom: 0;
					width: 1px;
					height: 90%;
					background-color: #E7E7E7;
				}
			}
		}
	}

	.footer-btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 999;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		gap: 14rpx;
		display: flex;
		align-items: center;

		.cancel {
			width: 178rpx;
			height: 80rpx;
			border: 1px solid var(--primary-color);

			color: var(--primary-color);
			font-size: 34rpx;
			font-weight: 400;
			line-height: 80rpx;
			text-align: center;
		}

		.confirm {
			flex: 1;
			height: 80rpx;
			border: 1px solid var(--gradient-color-vertical);
			background: var(--gradient-color-vertical);

			font-size: 34rpx;
			font-weight: 400;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}
</style>